<template>
  <view>
    <scroll-view class="scrolitem" scroll-x scroll-with-animation enable-flex :scroll-into-view="'scroll'+index">
      <view class="navitem" v-for="(list,i) in  videoGroup" :key="i" @click="clickTab(i)" :id="'scroll'+i">
        <view class="navcontent " :class="{active:index===i}">
          {{list.name}}
        </view>
      </view>
    </scroll-view>
    <scroll-view class="videoscroll" scroll-y>
      <!-- 瀑布流布局 -->
      <!-- <view v-for="(videoInfoList,index) in list" v-bind:key="index" :slot="index"> -->
      <!-- <eimlFlow :list="videoInfoList" :columnNum="2"> -->
      <!-- <image :src="videoInfoList.creator.avatarUrl"></image> -->
      <!-- </eimlFlow> -->
      <!-- </view> -->
      <view class="videoItem" v-for="(item,i) in videoInfoList" :key="i">
        <view class="cloudContainer">
          <video class="video" :src="item.videoUrl" @play="handlePlay" :id="item.id" :poster="item.coverUrl"
            @timeupdate="update" @ended="endVideo" v-if="item.id===videoId"></video>
          <image class="video" :src="item.coverUrl" @click="toggle(item.id)" v-else></image>
          <view class="videoDes">{{item.title}}</view>
          <view class="border"></view>
          <view class="dzcontainer">
            <view class="videoInfo">
              <image :src="item.creator.avatarUrl"></image>
              <text>{{item.creator.nickname}}</text>
            </view>
            <view class="right">

              <view class="praisedCount">
                <image src="../../static/image/tabs/聚收藏gift.png"></image>
                <text>{{item.praisedCount}}</text>
              </view>

              <view class="commentCount">
                <uni-icons type="chat" size="30"></uni-icons>
                <text>{{item.commentCount}}</text>
              </view>

            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
  import eimlFlow from "@/components/eiml-flow-layout/eiml-flow-layout.vue"
  export default {
    components: {
      'eimlFlow': eimlFlow
    },
    onLoad() {
      this.getVideoGroup()
    },
    data() {
      return {
        // 视频列表索引
        videoGroup: [],
        // 索引列表
        index: 0,
        vid: null,
        // 视频列表
        videoList: [],
        videoInfoList: [],
        videoId: '',
        currentTimelist: []
      };
    },

    methods: {
      // 视频结束回调
      endVideo() {
        const Index = this.currentTimelist.findIndex((item => item.videoId === this.videoId))
        console.log(Index)
        this.currentTimelist.splice(Index, 1)
      },
      // 获取每个视频的进度
      update(event) {

        let obj = {
          videoId: this.videoId,
          currentTime: event.detail.currentTime
        }
        // console.log(event.detail.currentTime)

        setTimeout(() => {
          const objlist = this.currentTimelist.find(item => item.videoId === obj.videoId)
          if (objlist) {
            objlist.currentTime = obj.currentTime
          } else {

            this.currentTimelist.push(obj)
          }
        }, 3000)

      },
      // 切换视频与图片
      toggle(videoId) {
        console.log(videoId)
        this.videoId = videoId
      },
      // 解决多个视频播放
      handlePlay(event) {
        // console.log(event)

        const objlists = this.currentTimelist.find(item => item.videoId === this.videoId)
        console.log(objlists)
        if (objlists) {
          // console.log(objlists.currentTime)
          uni.createVideoContext(this.videoId, this).seek(objlists.currentTime)
        }
      },
      // 点击切换视频列表
      clickTab(i) {
        this.index = i
        // 点击导航索引更新视频列表
        this.updataVideoList()
      },
      // 点击导航索引更新视频列表
      updataVideoList() {
        this.vid = this.videoGroup[this.index].id
        this.getVideo()
      },
      // 获取视频标签列表
      async getVideoGroup() {
        const {
          data: res
        } = await uni.$http.get('/video/group/list')
        const videoGroup = res.data.slice(50, 64)
        console.log(videoGroup)
        this.videoGroup = videoGroup
        this.vid = this.videoGroup[this.index].id
        this.getVideo()
      },
      // 获取视频
      async getVideo() {
        const {
          data: res
        } = await uni.$http.get('/video/group?id=' + this.vid)
        // console.log(res)
        // this.video = res
        if (res.code !== 200) {
          return uni.$showMsg()
        }
        this.videoList = res.datas
        // console.log(this.videoList)
        let videoInfoList = [];
        this.videoList.forEach((item) => {
          videoInfoList.push({
            id: item.data.vid,
            title: item.data.title,
            creator: item.data.creator,
            commentCount: item.data.commentCount,
            praisedCount: item.data.praisedCount,
            coverUrl: item.data.coverUrl,
            videoUrl: ""
          })
        })
        videoInfoList.forEach((item) => {
          uni.$http.get('/video/url?id=' + item.id).then(res => {
            item.videoUrl = res.data.urls[0].url
            item.id = res.data.urls[0].id
            console.log(res.data.urls[0].id)
          })
        })
        this.videoInfoList = videoInfoList
        // console.log(videoInfoList)

      }
    }
  }
</script>

<style lang="scss">
  .videoscroll {
    margin-top: 10rpx;
    // 100vh表示屏幕高度100%  vw表示屏幕宽度100%
    height: 1100rpx;

  }

  .right image {
    height: 40rpx;
    width: 40rpx;
  }

  .praisedCount {
    display: flex;
    align-items: center;
    margin-right: 10rpx;
  }

  .videoDes {

    width: 489rpx;
    height: 90rpx;
    /* 多行文本溢出隐藏，省略号代替 */

    // 文字不允许换行（单行文本）
    white-space: nowrap;

    line-height: 90rpx;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    /* 设置对齐模式 */
    -webkit-box-orient: vertical;
    /* 设置盒子的行数 */
    -webkit-line-clamp: 1;
    margin-top: 40rpx;

  }

  .commentCount {
    display: flex;
    align-items: center;
  }

  .border {
    height: 2px;
    width: 600rpx;
    border-bottom: 2rpx solid #eee;
  }

  .scrolitem {
    height: 70rpx;
    display: flex;
    white-space: nowrap;

  }

  .navitem {
    padding: 14rpx 10rpx;
    text-align: center;
    line-height: 48rpx;
  }

  .navcontent {
    color: #515151;
    width: 120rpx;
  }

  .active {
    background-color: #ff5252;
    font-weight: bold;
    color: #fff;
    width: 120rpx;
    height: 50rpx;
    border-radius: 30px;

  }


  .dzcontainer {
    display: flex;
    width: 800rpx;
    justify-content: space-around;
    align-items: center;
    margin-top: 40rpx;
  }

  .videoInfo {
    display: flex;
    align-items: center;
  }

  .videoInfo image {
    height: 50rpx;
    width: 50rpx;
    border-radius: 50%;
    margin-right: 10rpx;
  }

  .right {
    display: flex;
    align-items: center;
  }

  .cloudContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 30rpx;
  }

  .video {
    width: 700rpx;
    height: 400rpx;
    border-radius: 25px;
  }
</style>
